<style>
	.problema_texto  { font-size:100%; padding-right:10px; }
</style>



<table width='100%'>

	<tr>
		<td style="text-align:right;vertical-align: middle;">Práctica:</td>
		<td colspan='2'>
			<div id="resultado_busqueda_practica"></div>
			<input id='practica' name='practica' style="width:189px;font-size:12px;margin-right: -3px;" onkeypress="prevenirPulsarEnter(this.name)">
			<input type="button" value="Buscar" id="buscar_practicas" class="btn" style="width: 59px;vertical-align: baseline;">
			<input id='texto_practica_seleccionada' name='texto_practica_seleccionada' type='hidden' >
			<input id='practica_id' name='practica_id' type='hidden' >
		</td>
		<td style="text-align:right;vertical-align: middle;">Fecha:</td>
		<td>
			<input name="fecha_practica" id="fecha_practica" type="text" value="<?php echo date("d/m/Y");?>" readonly="readonly" style="width:90px; font-size: 100%">
		</td>
	</tr>

	<tr>
		<td colspan='3'>
			Observaciones:<br/>
			<textarea id='comments' name='comments' style="font-size: 100%;"></textarea>
		</td>
		<td style="vertical-align: bottom;"><input type="button" value="Agregar" id="practica_boton_agregar" class="btn" style="cursor:pointer;"></td>		
	</tr>
</table>


<table id="lista_practicas">

</table>							

<script>

	jQuery(function() {
		
		jQuery('#practica_id').val(0);

/*
		jQuery("#practica").autocomplete("/ajax/listado_practicas/", {
			width: 260,
			selectFirst: true
		});

		jQuery("#practica").result(function(event, data, formatted) {
			if (data)
				jQuery("#practica_id").val(data[1]);
				jQuery("#texto_practica_seleccionada").val(data[0]);
		});
*/

		jQuery("#buscar_practicas").click(function() {

			jQuery("#resultado_busqueda_practica").show();

			// Muestra Transicion
			jQuery('#resultado_busqueda_practica').html('<img src="/images/loading3.gif" />');			

			jQuery.ajax({
				type: "GET",
				url: "/ajax/listado_practicas/",
				data: "q="+jQuery("#practica").val(),
				success: function(data) {

					var obj = jQuery.parseJSON('['+data+']');
					var html_resultado = "";

					if(obj.length > 0){
						html_resultado = '<p style="margin-bottom: 2px;float: left;"><b>Se encontraron '+obj.length+' resultados</b><div style="float: right;margin-top: -5px;"><a href="javascript:cerrarResultadoPracticas()" style="font-weight: bold;">x</a></div></p>';
						// Muestro el Resultado
						jQuery.each(obj, function(key, val) {
						    html_resultado += '<p style="margin-top: 2px;"><a href="javascript:agregarElementosPracticas(\''+val.id+'\',\''+val.name+'\');" class="btn" style="text-align: left;width: 94%;">'+val.name+'</p>';
						});
					}else{
						html_resultado = '<p style="margin-top: 2px;float: left;">No se encontraron datos.<div style="float: right;margin-top: -5px;"><a href="javascript:cerrarResultadoPracticas()" style="font-weight: bold;">x</a></div></p>';
					}
					jQuery("#resultado_busqueda_practica").html(html_resultado);
				}

			})
		});



		jQuery( "#fecha_practica" ).datepicker({
				showOtherMonths: true,
				dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
				dateFormat: 'dd/mm/yy',
				monthNamesShort:	['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
				monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
				changeMonth: true,
				changeYear: true,
				minDate: "-<?php echo $edad['edad'] ?><?php if($edad['unidad_edad'] == "años"){ echo "Y";}else{ echo "D";}?>", 
				maxDate: 0,				
				nextText: 'Siguiente',
				prevText: 'Anterior'
		});
		
		//  Agregar opcion
		jQuery("#practica_boton_agregar").click(function(evento){
				
			var practica_id        = jQuery("#practica_id").val();
			var practica_texto     = jQuery("#practica").val();
			var texto_practica_seleccionada = jQuery("#texto_practica_seleccionada").val();
			var fecha              = jQuery("#fecha_practica").val();
			var comments           = jQuery("#comments").val();
			
			if (practica_id > 0 && practica_texto == texto_practica_seleccionada) {
				var tds = "<tr>";
				tds += "<td class='problema_texto'><img src='/images/delete.gif' class='sv_delete'/></td>";
				tds += "<td class='problema_texto' style=\"width:280px;overflow:hidden;\">" + practica_texto + "</td>";
				tds += "<td class='problema_texto'>";
				tds += "<input name='data[Practicas]["+ practica_id +"][fecha]' value='"+ fecha +"'type='hidden'/>";						
				tds += "<input name='data[Practicas]["+ practica_id +"][comments]' value='"+ comments +"'type='hidden'/>";										
				tds += "</td>";
				tds += "<td class='problema_texto'>"+ fecha.substr(0,5)+"</td>";				
				
				tds += "</tr>";
				jQuery("#lista_practicas").append(tds);
			}			

			jQuery('#practica_id').val(0);
			jQuery('#practica').val('');
			jQuery('#texto_practica_seleccionada').val('');
			jQuery('#comments').val('');
		});
		   
		// event listener for delete button 
		jQuery(".sv_delete").live('click', function(event) {
			jQuery(this).parent().parent().remove();
		});    
	})
</script>